<template>
  <div id="box">
    <div id="login">
      <div id="top">东铭后台管理系统</div>
      <div id="bottom">
        <div class="right"></div>

        <div class="left">
          <p class="yongH">
            <img src="../../assets/login-imgs/icon03.png" alt="" />
            <input type="text" placeholder="手机号登录" id="sjh" />
          </p>
          <p class="yongH">
            <img src="../../assets/login-imgs/icon04.png" alt="" />
            <input type="password" placeholder="输入密码" id="miMa" />
          </p>
          <p class="miMa">
            <img src="../../assets/login-imgs/icon05.png" alt="" />
            <input
              class="kuan"
              type="text"
              placeholder="请输入验证码"
              id="yzm1"
            />
            <input class="yzm" :value="yzm" />
          </p>
          <p class="result" @click="handelW">忘记密码？</p>
          <p class="login1" @click="handelDl">登录</p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
export default {
  setup() {
    const router = useRouter();

    const yzm = ref("");
    const ranNum = () => {
      var arr = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, "a", "b", "c", "d", "e", "f"]; //0-14
      var str = "";
      for (var i = 1; i <= 4; i++) {
        //拼接6次，每次随机从数组中获取一个字符。
        var index = parseInt(Math.random() * arr.length); //Math.random()*15
        str += arr[index];
      }
      return str; //返回拼接的结果
    };
    const open4 = (index) => {
      ElMessage.error(index);
    };
    const open2 = (index) => {
      ElMessage({
        showClose: true,
        message: index,
        type: "success",
      });
    };
    const handelDl = () => {
      let a = yzm.value;
      let b = document.getElementById("yzm1").value;
      let c = document.getElementById("sjh").value;
      let d = document.getElementById("miMa").value;
      // 刚注册的账号，然后在拿出来登录做对比
      let num = localStorage.getItem("token");
      let miMa = localStorage.getItem("miMa");

      if (a == b) {
        if (c == num && miMa == d) {
          open2("登录成功");
          router.push("/home");
        } else {
          open4("请输入正确的账号或者密码");
        }
      } else {
        open4("请输入正确的验证码");
      }
    };
    const handelW = () => {
      router.push("/rest");
    };

    onMounted(() => {
      yzm.value = ranNum();
    });
    return {
      open2,
      open4,
      yzm,
      ranNum,
      handelDl,
      handelW,
    };
  },
};
</script>
<style lang="less" scoped>
#box {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: url("../../assets/login-imgs/icon01.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  #login {
    display: flex;
    width: 1000px;
    height: 600px;
    background: #5f4e72;
    opacity: 0.8;
    flex-direction: column;
    #top {
      text-align: center;
      width: 100%;
      font-size: 76px;
      font-family: SourceHanSansSC;
      font-weight: bold;
      color: #fefefe;
      line-height: 144px;
    }
    #bottom {
      display: flex;
      .right {
        background-image: url("../../assets/login-imgs/icon02.png");
        background-repeat: no-repeat;
        background-size: 100% 100%;
        margin: 30px 20px 0px 150px;
        width: 350px;
        height: 350px;
      }
      .left {
        margin-top: 30px;
        width: 350px;
        height: 350px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .yongH {
          margin-top: 20px;
          text-align: center;
          img {
            margin-right: 20px;
            width: 30px;
            vertical-align: -50%;
            height: 30px;
          }
          input {
            border-radius: 5px;
            width: 200px;
            height: 30px;
            text-indent: 5px;
          }
        }
        .miMa {
          border-radius: 5px;
          margin-top: 20px;
          text-align: center;
          img {
            margin-right: 20px;
            width: 30px;
            vertical-align: -50%;
            height: 30px;
          }
          .kuan {
            border-radius: 5px;
            width: 120px;
            height: 30px;
            margin-right: 28px;
            text-indent: 5px;
          }
          .yzm {
            border-radius: 5px;
            width: 50px;
            height: 30px;
            text-indent: 5px;
          }
        }
        .result {
          cursor: pointer;
          margin: 10px 0px 10px 200px;
        }
        .login1 {
          cursor: pointer;
          border-radius: 5px;
          width: 200px;
          height: 30px;
          font-family: SourceHanSansSC-Normal;
          margin-left: 50px;
          text-indent: 5px;
          text-align: center;
          line-height: 30px;
          background-color: #fff;
        }
      }
    }
  }
}
</style>
